$(function () {
    //流量看板时间切换监听器
    document.getElementById("bulletin-board-time-type").addEventListener("statistics-time",function (evt) {
        //时间回调
        flowBulletinBoard(evt.detail.type,evt.detail.startTime,evt.detail.endTime);
    });

    //流量分布时间切换监听器
    document.getElementById("flow-board-time-type").addEventListener("statistics-time",function (evt) {
        //时间回调
        queryTerminalUVCountData(evt.detail.type,evt.detail.startTime,evt.detail.endTime);
    });

    //云视频数据面板
    if(videoType=='96K'){
        initTimeType("video-board-time-type");
        initTime("videoStatTimeLaydate","videoEndTimeLaydate",'video-board-time-type');
        queryVideoFlowCountData(2,null,null);
        //流量分布时间切换监听器
        document.getElementById("video-board-time-type").addEventListener("statistics-time",function (evt) {
            queryVideoFlowCountData(evt.detail.type,evt.detail.startTime,evt.detail.endTime);
        });
    }

    //初始化流量看板的时间筛选
    initTimeType("bulletin-board-time-type");
    //流量分布
    initTimeType("flow-board-time-type");
    //初始化流量看板的时间控件
    initTime("boardStatTimeLaydate","boardEndTimeLaydate",'bulletin-board-time-type');
    //流量分布
    initTime("flowStatTimeLaydate","flowEndTimeLaydate",'flow-board-time-type');

    /**流量看板*/
    flowBulletinBoard(2,null,null);
    //终端系统分布
    queryTerminalUVCountData(2,null,null);

    /**
     * 流量看板数据统计
     * @param type 时间类型，1=今日实时，2=近7天（不包含当天），3=近30天（不包含当天），4=自定义（只可选当天之前的时间，且时间跨度不超过12月）
     * @param startTime 开始时间
     * @param endTime 结果时间
     */
    function flowBulletinBoard(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/flowBulletinBoard',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                $("#board-loading-box").removeClass("hide");
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    var pvCount = result.pvCount;
                    showNum("pvCount",pvCount);
                    var uvCount = result.uvCount;
                    showNum("uvCount",uvCount);
                    var goodsPVCount = result.goodsPVCount;
                    showNum("goodsPVCount",goodsPVCount);
                    var goodsUVCount = result.goodsUVCount;
                    showNum("goodsUVCount",goodsUVCount);
                    initBoardECharts(result);
                    $("#board-loading-box").addClass("hide");
                }
            }
        });
    }

    /**
     * 初始化流量看板拆线图片
     * @param result
     */
    function initBoardECharts(result) {
        var type = result.type;
        var xList= result.xList;
        var boardEChart = echarts.init(document.getElementById("board-charts-box"));
        var titleList = new Array();
        var seriesList = new Array();

        var pageViewCountList = result.pageViewCountList;
        var pvList = new Array();
        $.each(pageViewCountList,function (index,pv) {
            pvList.push(pv.pvCount);
        });
        var color =[
            "#1890ff",
            "#2fc25b",
            "#fbd44b",
            "#f4667c",
            "#47D8BE"
        ];
        var pvObj = {
            name:'平台访问量',
            type:'line',
            data:pvList, color: color[0],
            lineStyle: {
                normal: {
                    width: 3,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 1,
                            color: color[0] // 0% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: color[0],
                    borderWidth: 7,
                    borderColor:color[0]
                }
            },
            smooth: true
        };

        var goodsPVCountList = result.goodsPVCountList;
        var goodsPvList = new Array();
        $.each(goodsPVCountList,function (index,pv) {
            goodsPvList.push(pv.pvCount);
        });

        var goodsPVObj = {
            name:'商品访问量',
            type:'line',
            data:goodsPvList, color: color[1],
            lineStyle: {
                normal: {
                    width: 3,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 1,
                            color: color[1] // 0% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: color[1],
                    borderWidth: 7,
                    borderColor:color[1]
                }
            },
            smooth: true
        };

        if(type==1){
            titleList.push("平台访问量");
            seriesList.push(pvObj);
            seriesList.push({name:'',
                type:'line',
                data:[]});
            titleList.push("商品访问量");
            seriesList.push(goodsPVObj);
            seriesList.push({name:'',
                type:'line',
                data:[]});
        }else{
            titleList.push("平台访问量");
            seriesList.push(pvObj);

            titleList.push("平台访客数");
            var uniqueVisitorCountList = result.uniqueVisitorCountList;
            var uvList = new Array();
            $.each(uniqueVisitorCountList,function (index,uv) {
                uvList.push(uv.requestCount);
            });
            var uvObj= {
                name:'平台访客数',
                type:'line',
                data:uvList,
                color: color[2],
                lineStyle: {
                    normal: {
                        width: 3,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 1,
                                color: color[2] // 0% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: color[2],
                        borderWidth: 7,
                        borderColor:color[2]
                    }
                },
                smooth: true
            };
            seriesList.push(uvObj);

            titleList.push("商品访问量");
            seriesList.push(goodsPVObj);

            titleList.push("商品访客数");
            var goodsUVCountList = result.goodsUVCountList;
            var goodsUvList =new Array();
            $.each(goodsUVCountList,function (index,uv) {
                goodsUvList.push(uv.uvCount);
            });
            var goodsUvObj= {
                name:'商品访客数',
                type:'line',
                data:goodsUvList,
                color: color[3],
                lineStyle: {
                    normal: {
                        width: 3,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 1,
                                color: color[3] // 0% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: color[3],
                        borderWidth: 7,
                        borderColor:color[3]
                    }
                },
                smooth: true
            };
            seriesList.push(goodsUvObj);
        }

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                color: color,
                data: titleList,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xList
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#DDD'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "#333"
                    },
                    onZero: false,
                },
                axisTick: {
                    alignWithLabel: true
                },
                nameTextStyle: {
                    color: "#999"
                },
                splitArea: {
                    show: false
                }
            },
            series: seriesList
        };
        boardEChart.setOption(option);
        $(window).resize(boardEChart.resize);
    }

    /**
     * 录播流量统计（96K）
     * @param type
     * @param startTime
     * @param endTime
     */
    function queryVideoFlowCountData(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/queryVideoFlowCountData',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                $("#video-flow-loading-box").removeClass("hide");
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    var useFlow = result.useFlow;
                    var flow = result.flow;
                    $("#useFlow").text(useFlow);
                    $("#flow").text(flow);
                    if(parseFloat(useFlow) > parseFloat(flow)){
                        $("#useFlow").removeClass('c-green').addClass('c-red');
                        $("#flow").next().removeClass('hide');
                    }else{
                        $("#useFlow").removeClass('c-red').addClass('c-green');
                        $("#flow").next().addClass('hide');
                    }
                    var useSpace = result.useSpace;
                    var space = result.space;
                    $("#useSpace").text(useSpace);
                    $("#space").text(space);
                    if(parseFloat(useSpace) > parseFloat(space)){
                        $("#useSpace").removeClass('c-green').addClass('c-red');
                        $("#space").next().removeClass('hide');
                    }else{
                        $("#useSpace").removeClass('c-red').addClass('c-green');
                        $("#space").next().addClass('hide');
                    }
                    initVideoFlowECharts(result);
                }
                $("#video-flow-loading-box").addClass("hide");
            }
        });
    }

    /**
     * 初始化注册统计数据ECharts
     * @param result 返回结果
     */
    function initVideoFlowECharts(result) {
        var dataList = result.entity;
        //===============下面是图形数据初始化显示==================
        var xList = new Array();
        var videoFlowList = new Array();
        $.each(dataList,function (index,data) {
            videoFlowList.push(parseFloat(data.flow / 1024/1024).toFixed(2));
            xList.push(data.time);
        });
        var videoFlowEChart = echarts.init(document.getElementById("video-flow-box"));
        var colors = [ "#1890ff",
            "#2fc25b",
            "#fbd44b"];
        var option = {
            color: colors,
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data:[ '录播流量统计图']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '使用流量  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '') +"M";
                            }
                        }
                    },
                    data: xList
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name:'录播流量统计图',
                    type:'line',
                    data: videoFlowList  ,color: color[2],
                    lineStyle: {
                        normal: {
                            width: 3,
                            color: {
                                type: 'linear',

                                colorStops: [{
                                    offset: 1,
                                    color: color[2] // 0% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[2],
                            borderWidth: 7,
                            borderColor:color[2]
                        }
                    },
                    smooth: true
                }
            ]
        };

        videoFlowEChart.setOption(option);
        $(window).resize(videoFlowEChart.resize);
    }

    /**
     * 终端系统分布
     * @param type
     * @param startTime
     * @param endTime
     */
    function queryTerminalUVCountData(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/queryTerminalUVCountData',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                $("#terminal-loading-box").removeClass("hide");
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    initTerminalECharts(result);
                    //$("#terminal-loading-box").addClass("hide");
                }
                //渠道分布
                queryPageViewCountSpread(type,startTime,endTime);
            }
        });
    }

    /**
     * 初始化终端系统分布图
     * @param result
     */
    function initTerminalECharts(result) {
        var terminalEChart = echarts.init(document.getElementById("terminal-stat-box"));
        var objData = result.entity;
        var max = 0;
        max = Math.max(objData.windowCount,objData.andCount);
        max = Math.max(max,objData.iosCount);
        max = Math.max(max,objData.macCount);
        max = Math.max(max,objData.otherCount);
        var colors = ['#5793f3', '#d14a61', '#675bba'];
        var option = {
            color: colors,
            tooltip: {},
            radar: {
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#5793f3',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    { name: 'Windows', max: max},
                    { name: 'Android', max: max},
                    { name: 'IOS', max: max},
                    { name: 'MAC', max: max},
                    { name: '其他', max: max}
                ]
            },
            series: [{
                name: '终端系统分布',
                type: 'radar',
                data : [
                    {
                        value : [
                            objData.windowCount,
                            objData.andCount,
                            objData.iosCount,
                            objData.macCount,
                            objData.otherCount
                        ],
                        name : '用户分布'
                    }
                ]
            }]
        };
        terminalEChart.setOption(option);
        $(window).resize(terminalEChart.resize);
    }

    /**
     * 渠道分布(PV)
     * @param type
     * @param startTime
     * @param endTime
     */
    function queryPageViewCountSpread(type,startTime,endTime) {
        $.ajax({
            url: baseloaction + '/admin/stat/queryPageViewCountSpread',
            type:'post',
            dataType:'json',
            beforeSend:function(XH){
                return true;
            },
            data:{
                'type':type,
                'startTime':startTime,
                'endTime':endTime
            },
            success:function (result) {
                if(result.success==true){
                    initPageViewECharts(result);
                    $("#terminal-loading-box").addClass("hide");
                }
            }
        });
    }

    /**
     * 初始化终端系统分布图
     * @param result
     */
    function initPageViewECharts(result) {
        var pageViewEChart = echarts.init(document.getElementById("page-view-stat-box"));
        var objData = result.entity;
        var max = 0;
        max = Math.max(objData.appletCount,objData.pcCount);
        max = Math.max(max,objData.iosCount);
        max = Math.max(max,objData.anCount);
        max = Math.max(max,objData.mobileCount);
        var option = {
            tooltip: {},
            radar: {
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#ee641d',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    { name: 'PC', max: max},
                    { name: 'H5', max: max},
                    { name: '安卓', max: max},
                    { name: 'IOS', max: max},
                    { name: '小程序', max: max}
                ]
            },
            series: [{
                name: '渠道分布',
                type: 'radar',
                data : [
                    {
                        value : [
                            objData.pcCount,
                            objData.mobileCount,
                            objData.anCount,
                            objData.iosCount,
                            objData.appletCount
                        ],
                        name : 'PV访问分布'
                    }
                ]
            }]
        };
        pageViewEChart.setOption(option);
        $(window).resize(pageViewEChart.resize);
    }

    function showNum(id,num) {
        if(num > 9999){
            num = parseFloat(num / 10000).toFixed(2);
            $("#"+id).next().removeClass('hide');
        }else{
            if(num <=0){
                num = '--';
            }
        }
        $("#"+id).text(num);
    }
});